<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header @textInput="textInput" />
      <Content :todoList="todoList" 
      @deleteItem="deleteItem"
      @inputCheck="inputCheck"
      />
      <Footer 
      :todoList="todoList"
      @allCheck="allCheck"
      @deleteAll="deleteAll"
       />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "App",
  });
</script>
<script lang="ts" setup>
  import { nanoid } from "nanoid";
  import { ref } from "vue";
  import { todoItemType, todoListType } from "./App";
  import Header from "./components/Header/index.vue";
  import Content from "./components/Content/index.vue";
  import Footer from "./components/Footer/index.vue";
  //1. todo的数据(状态提升)
  const todoList = ref<todoListType>([
    { id: nanoid(), thing: "吃", done: false },
    { id: nanoid(), thing: "喝", done: false },
    { id: nanoid(), thing: "玩", done: false },
  ]);
  
  //2.content 接受自定义事件传递删除单个的下标
  const deleteItem = (index:number)=>{
    todoList.value.splice(index,1)
  }
  //3.content 接受自定义事件传递的单个的done
  const inputCheck = (index:number)=>{
    todoList.value[index].done = !todoList.value[index].done
  }
  //4.header 接受自定义事件传递的todo信息
  const textInput = (newTodo:todoItemType)=>{
    todoList.value.unshift(newTodo)
  }
  //5.footer 接受自定义事件传递全选的checked
  const allCheck = (checkType:boolean)=>{
    todoList.value.forEach((item)=>item.done=checkType)
  }
  //6.footer 接受自定义事件传递要删除已完成的todo
  const deleteAll = ()=>{
   todoList.value = todoList.value.filter(item=>!item.done)
  }
</script>

<style lang="scss" >
  /*base*/
  body {
    background: #fff;
  }

  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }

  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }

  .btn:focus {
    outline: none;
  }

  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
